// 歌曲进度条
<template>
<div class="progress-bar" ref="progressBar">
    <div class="bar-inner">
        <div class="progress" ref="progress"></div>
        <div class="progress-btn-wrapper" ref="progressBtn">
            <div class="progress-btn" ></div>
        </div>
    </div>
</div>
</template>

<script>
const progressBtnWidth = 16;
export default {
  name: 'progressBar',
  props: {
    percent: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    // 歌曲已播放进度
    percent(newPercent) {
      // 获取进度条整体长度
      const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth;
      // 获取当个播放进度
      const offsetWidth = newPercent * barWidth;
      // 设置已播放歌曲进度条随已播放进度移动
      this.$refs.progress.style.width = `${offsetWidth}px`;
      // 设置播放条按钮的跟随移动
      this.$refs.progressBtn.style.transform = `translate3d(${offsetWidth}px,0,0)`;
    },
  },
};
</script>

<style lang='scss' scoped>
.progress-bar{
    width: 100%;
    height: 30px;
    .bar-inner{
        position: relative;
        top: 13px;
        width: 100%;
        height: 4px;
        background-color: rgba(255,255,255,0.3);
        border-radius: 10px;
        .progress{
            position: absolute;
            height: 100%;
            border-radius: 10px;
            background: rgb(184, 109, 87);
        }
        .progress-btn-wrapper{
            position: absolute;
            left: -8px;
            top: -13px;
            width: 30px;
            height: 30px;
            .progress-btn{
                position: relative;
                top: 7px;
                left: 7px;
                width: 14px;
                height: 14px;
                background-color: rgb(186, 81, 91);
                border-radius: 50%;
            }
        }
    }
}
</style>
